<html>
  <head>
    <title>概念简介</title>
  </head>
  <body>
    <script>
      // 概念简介   UniApp组成和跨端原理

            /*
                一、基本语言和跨端规范

                        uniApp 代码编写，基本语言包括 js、vue、css 以及ts、scss 等css预编译器。

                        在app端，还支持原生渲染的nvue,以及可以编译为kotlin 和 swift的uts。

                        DCloud还提供了使用js编写服务器代码的 uniCloud 云引擎。

                        所以，只需要掌握js，你可以开发 web、Android、ios、各家小程序以及服务器等全栈应用。

                      

                        为了实现多端兼容，综合考虑编译速度、运行性能等因素， uniApp约定了如下开发规范：

                                1、页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个.vue文件

                                2、组件标签靠近小程序规范，详见uni-app 组件规范

                                3、接口能力(JS Api) 靠近小程序规范，但需要将前缀 wx、my等替换为 uni,详见uni-app接口规范。

                                4、数据绑定 和 事件处理同 vue.js 规范，同事补充了 “应用生命周期” 和 "页面生命周期"

                                5、如需要兼容app-nvue平台，建议使用flex 布局进行开发。

                        uni-app 分 "编译器" 和 "运行时"。   uni-app能实现一套代码、多端运行，是通过这2个部分配合完成的。

                        编译器将开发者的代码进行编译，编译的输出物有各个端的 runtime进行解析，
                        
                        每个平台(Web、Android App、ios App各家小程序)都有各自的runtime.
            */
           /*
                二、编译器

                        1、编译器运行在电脑的"开发环境"。一般是在 HBuilderX工具中，也可以使用独立的cli版。

                        2、开发者按照 uni-app规范编写代码，由编译器将开发者的代码编译生成每个平台支持的特有代码：

                                ①、在web平台，将.vue文件编译为js代码。与普通的vue cli项目类似

                                ②、在微信小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码

                                ③、在app平台，将.vue文件编译为js代码。进一步，如果涉及uts代码：
                                        在Android平台，将.uts文件编译为kotlin代码
                                        在iOS平台，将.uts文件编译为swift代码

                        3、编译器分为 vue2 版本 和 vue3版本

                                 vue2版本： 基于 webpack实现
                                 vue3版本： 基于 Vite 实现，性能更快

                        4、编译器支持条件编译，可以指定某部分代码只编译到特定的终端。从而将"公用"和"个性化"融合到一个工程中：

                                  // #ifdef  App
                                        console.log("这段代码只有在App平台才会被编译进去。非App平台编译后没有这段代码")
                                  // #endif
           */

           /*
                三、运行时 （RunTime）

                        runtime 不是运行在电脑开发环境下的，而是运行在真正的终端上。

                        uniApp 在每个平台 Web、Android App、iOS App、各家小程序） 都有各自的 runtime. 这是一个比较庞大的工程。

                            1、小程序端：

                                     在小程序端，uni-app的runtime，主要是一个小程序版的vue runtime，页面路由、组件、api等方面基本都是转义。

                            2、Web端：

                                     在web端，uni-app的runtime相比普通的vue项目，多了一套ui库、页面路由框架、和uni对象（即常见API封装）

                            3、App端：

                                    在App端，uni-app的runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，
                                    
                                    打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。
                                    
                                    当然，事实上DCloud确实有小程序引擎产品，供原生应用实现小程序化，详见


                        uniApp runtime 包括3个部分：  基础框架、组件、Api

                              1、基础框架：

                                    ①、 包括语法、数据驱动、全局文件、应用管理、页面管理、js引擎、渲染和排版引擎等

                                    ②、 在web 和 小程序上，不需要 uni-app 提供js引擎和排版引擎，直接使用浏览器和小程序的即可。但在 app上需要uni-app提供。

                                    ③、 App的js引擎： App-Android上，uni-app 的js 引擎是v8引擎。

                                                    App-ios是 jscore引擎。

                                    ④、 App 的渲染引擎：

                                                    同时提供了2套渲染引擎， .vue页面文件由 webview渲染，原理与小程序相同；

                                                    .nvew页面文件由原生渲染，原理与 react native相同。

                                                    开发者可以根据需要自主选择渲染引擎。

                              2、组件：

                                     ①、runtime 中包括的组件只有基础组件如 <view>、<button>等。扩展组件不包含在uni-app的 runtime中，而是下载到用户的项目代码中。（这些组件都是vue组件）

                                     ②、为了降低开发者的学习成本，uni-app的内置基础组件命名规范与小程序基本相同。

                                     ③、这几十个组件不管在哪个平台，已经被处理为均有一致表现。

                                     ④、在小程序端，uni-app基础组件会直接转义为小程序的内置组件。
                                      
                                        在小程序的runtime中不占体积。

                                     ⑤、在web和 android、ios端，这几十个组件都在uni-app的 runtime 中，会占用一定体积，相当于内置了一套ui库。

                                     ⑥、组件的扩展：

                                             有了几十个基础组件，大多数扩展组件也都是基于这些基础组件封装的。

                                             比如官方提供的扩展UI库 uni ui.

                                             在web 平台， for web 的各种ui库（elementUI）也可以使用，但这些库由于操作了DOM，无法跨端在 app 和 小程序中使用。

                                             在App平台，uni-app也支持使用原生编程语言类自行扩展原生组件，比如原生的地图、ar等。

                                             uni-app同时支持支持将"微信自定义组件"运行到微信小程序、web、app 这3个平台。注意微信自定义组件不是vue组件。

                            
                              3、API：

                                    ①、uni-app runtime内置了大量"常见的"、"跨端的" API，比如网络请求(uni.request)、读取存储(uni.getStorage)

                                    ②、同时 uni-app 不限制各端原生的API调用。

                                            开发者可以在uni-app 框架中无限制的调用该平台所有能使用的API。

                                            即在小程序平台，小程序的所有API都可以使用；在web平台，小程序的所有API都可以使用；

                                            在web平台，浏览器的所有API都可以使用；在IOS和 Android平台，os的所有API都可以使用。

                                    ③、也就是说，使用uni-app的标准API，可以跨端使用。但对于不跨段的部分，仍可以调用该端的专有API。

                                            由于常见的API都已经被封装内置，所以日常开发时，开发者只需关注uni标准API，

                                            当需要调用特色端能力时在"条件编译"里编写特色API调用代码。

                                    ④、ext API(额外API)：

                                            web 和 app 的 runtime 体积不小，如果把小程序所有API等内置进去会让开发者的最终应用体积变大。

                                            所以有部分不常用的API被剥离为 ext API。虽然仍然是"uni."开头，但需要单独下载插件到项目中。

                                    ⑤、小程序平台：  

                                            uni对象会转为小程序的自由对象，比如在微信小程序平台，编写uni.request 等同于 wx.request.

                                            那么所有"wx."开头的api都可以这样使用。

                                    ⑥、web平台： window、dom 等浏览器专用API仍可以使用。

                                    ⑦、app平台：

                                                除了uni. 的API，还可以使用 plus.的API、Native.js,以及通过uts编写的原生插件，

                                                或者使用 java 和 objectC 编写的原生插件。这些插件调用os的API并封装给js使用。

                                    ⑧、由于历史传承，DCloud在开发app时有： 5+App、wap2app、uni-app 等3中模式。

                                                这3中模式的runtime在底层能力上是通用的，所有uni-app 可以嗲用5+（也就是plus.xxx）的API。

                                                虽然都可以使用5+的系统能力，但uni-app的逻辑层运行在js层，渲染层是webview 和 原生 nvue双选。

                                                而5+不区分逻辑层和渲染层，全部都运行在webview里，在性能上 5+ 不及uni-app.

                                   DCloud还提供了"插件市场"，大多数用得着的组件和API都已经有了现成的插件。
           */


           /*
                四、逻辑层和渲染层分离

                            在web平台，逻辑层(js) 和 渲染层(html、css)，都运行在同一的webview里。

                            但在小程序和app端，逻辑层和渲染层被分离了。

                            分离的核心原因是性能。过去很多开发者吐槽基于webview 的APP性能不佳，很大原因是js运算和界面渲染抢夺资源导致的卡顿。

                            不管小程序还是app，逻辑层都独立成了单独的js引擎，渲染层仍然是webview（app上也支持纯原生渲染）

                            所以注意，小程序 和 app 的"逻辑层"都不支持浏览器专用的 window、dom 等API。app只能在渲染层操作window、dom，即renderjs
           */
    </script>
  </body>
</html>